<!DOCTYPE html>
<!-- 做完轮播图的第一个功能，但是还有待完善 -->
<!-- 自己重新写轮播图动画移动的效果 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩网站</title>
    <script src="../../tool/move.js"></script>
    <script>
        window.onload = function () {
            // 轮播图效果：
            const scrollingUL = document.getElementById("scrolling-ul");
            const alertImgs = document.getElementsByClassName("alert-img");
            // 设置ul标签的宽度，以便所有图片都能横得过来；
            scrollingUL.style.width = 560 * alertImgs.length + "px";
            // 定义一个变量，表示当前的索引，默认第一个按钮是黑色
            let index = 0;
            let allA = document.getElementsByTagName("a");
            // 设置默认选中的a；
            allA[index].style.backgroundColor = "black";
            // 做功能：
            /*
            *功能1：点击导航按钮，显示对应图片,同时导航按钮的背景颜色也要跟着变化
            *功能2：自动播放图片
            *功能3：当用户点击按钮的级别高于自动播放的级别
            */
            // 功能1：点击第一个按钮，则显示第一张图片，第二个按钮显示第二张图片。。。。
            for (let i = 0; i < allA.length; i++) {
                // 绑定点击事件：
                allA[i].onclick = function () {
                    clearInterval(timer);
                    // 需要知道我们点击的是第几个按钮；i的值就表示第几张图片；
                    index = i;
                    //这里设置的轮播效果没有显示出动态的感觉，所以我们需要采用动画的效果，故而引入move工具函数； 
                    scrollingUL.style.left = -560 * index + "px";
                    // move(scrollingUL, "left", -560 * index, 1, function () {
                    //     autoChange();
                    // })
                    // 设置选中的导航按钮
                    setA();
                    autoChange();
                }

            }
            // 功能2：图片自动播放
            autoChange();
            // 创建一个自动播放图片的函数：
            var timer;
            function autoChange() {
                timer = setInterval(function () {
                    index++;
                    if (index > alertImgs.length - 1) {
                        index = 0;
                    }
                    // move(scrollingUL, "left", -560 * index, 50, function () {
                    // });
                    scrollingUL.style.left = -560 * index + "px";
                    setA();
                }, 2000);
            }
            // 创建一个函数专门来设置导航按钮的
            function setA() {
                if (index > allA.length - 1) {
                    index = 0;
                }
                // 当我们点击了导航按钮以后，将所有的导航按钮都设置成原来的颜色，这样就不会出现所有被点了的按钮都变黑了。
                for (let i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = ""; //这里如果写成确定的颜色，那么就相当于给导航按钮设置了一个内联样式，内联样式的级别会高于hover的级别，这样写了以后hover的效果会被覆盖。所以这里的颜色不写确定的值。这样没问题，因为原来就在style标签里面设置好了导航按钮的颜色的。
                }
                // 将选中的导航按钮设置成黑色背景
                allA[index].style.backgroundColor = "black";
            }


            // 当鼠标移动到哪一个tip上，哪一个就显示出它的详细提示语
            let tips = document.getElementsByClassName("detail-classfication");
            let subContainers = document.getElementsByClassName("sub-container");
            let names = document.getElementsByClassName("name");
            let a;
            for (let i = 0; i < tips.length; i++) {
                tips[i].onmouseover = function () {
                    a = i;
                    for (let j = 0; j < tips.length; j++) {
                        tips[j].style.color = "";
                        subContainers[j].style.display = "none";
                    }
                    tips[a].style.color = "#00a1d6";
                    subContainers[a].style.display = "block";
                    subContainers[a].style.color = "#212121";
                }
                subContainers[i].onmouseout = function () {
                    this.style.display = "none";
                    tips[i].style.color = "#212121";
                }
            }
            function Width(obj){
                let row = parseInt(obj.children.length/4);
                let yu= obj.children.length % 4
                if(yu == 0){
                    row = row; 
                }else{
                    row = row+1;
                }
                obj.style.width = row*90+"px";
            }
            for(let i =0;i<subContainers.length;i++){
                Width(subContainers[i]);
            }
            let music = document.getElementById("music");
            Width(music);

            // 推广列添加效果：
            let shortVedios =document.getElementsByClassName("short-vedio");
            let texts = document.getElementsByClassName("text");
            let times = document.getElementsByClassName("time");
            let videos =document.getElementsByClassName("vedio");
            let yanse;
            for(let i = 0 ;i<shortVedios.length;i++){
                shortVedios[i].onmouseover = function(){
                    // if(times){
                    //     times[i].style.display = "none";
                    //     // videos[i].style.display = "block";
                    // }
                    yanse = i;
                    for(let j =0;j<shortVedios.length;j++){
                        texts[j].style.color = "";
                    }

                    texts[yanse].style.color = "#00a1d6";
                }
                shortVedios[i].onmouseout = function(){
                    texts[yanse].style.color = "";
                }
            }


        }
    </script>
</head>
<link rel="stylesheet" href="./index.css">

<body>
    <div>
        <div class="topActive-box">
            <div class="top-topic">
                <div class="left-box">
                    <ul class="ul-tag clearfix">
                        <li class="icon-topic "><img class="img" src="./image/icon1.png" alt="">主站</li>
                        <li class="icon-topic hand-mouse">番剧</li>
                        <li class="icon-topic hand-mouse">游戏中心</li>
                        <li class="icon-topic hand-mouse">直播</li>
                        <li class="icon-topic hand-mouse">会员购</li>
                        <li class="icon-topic hand-mouse">漫画</li>
                        <li class="icon-topic hand-mouse">赛事</li>
                        <li class="icon-topic hand-mouse"><img class="img" src="./image/icon1.png" alt="">下载APP</li>
                    </ul>
                </div>
                <div class="mid-box">
                    <form action="" class="input-cont">
                        <input class="text-input" type="text" placeholder="坚持100秒赢100元！并送……">
                        <button class="search">
                            <svg t="1620023162660" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2061" width="10" height="10">
                                <path
                                    d="M222.6944 222.7968A323.1488 323.1488 0 0 0 133.6832 512c19.2512-87.3728 64.512-172.7488 135.0144-243.3024C339.2512 198.1184 424.6272 152.8832 512 133.632c-101.632-19.1488-210.688 10.5216-289.3056 89.1648z"
                                    fill="#333333" p-id="2062"></path>
                                <path
                                    d="M989.44 822.1184l-121.7024-121.7024a118.016 118.016 0 0 0-92.8-34.1248c114.4576-165.5552 97.92-394.3936-49.4848-541.824-165.9392-165.9904-435.0464-165.9904-601.0368 0-165.9392 165.9904-165.9392 435.1232 0 601.1136 147.4048 147.4304 376.064 163.84 541.7216 49.3824-2.56 33.28 8.8576 67.5328 34.1248 92.8l121.7024 121.728c46.08 45.9776 121.3696 45.9776 167.3472 0 46.208-45.9776 46.208-121.2928 0.128-167.3728zM676.096 676.096c-138.6752 138.6752-363.392 138.6752-502.016 0-138.6752-138.6752-138.6752-363.4432 0-502.1184 138.624-138.6752 363.3408-138.6752 502.016 0 138.6496 138.5728 138.6496 363.4432 0 502.1184z"
                                    fill="#333333" p-id="2063"></path>
                            </svg>
                        </button>
                    </form>
                </div>
                <div class="right-box">
                    <div class="write hand-mouse">投稿</div>
                    <ul class="ul-tag">
                        <li class="icon-topic right hand-mouse">创作中心</li>
                        <li class="icon-topic right hand-mouse">历史</li>
                        <li class="icon-topic right hand-mouse">收藏</li>
                        <li class="icon-topic right hand-mouse">动态</li>
                        <li class="icon-topic right hand-mouse">消息</li>
                        <li class="icon-topic right hand-mouse">大会员</li>
                        <li class="icon-topic right hand-mouse">
                            <img class="right-icon"
                                src="https://i0.hdslb.com/bfs/face/member/noface.jpg@160w_160h_1c.webp" alt="">
                            <div class="detail-imfor">
                                111111111
                            </div>
                        </li>

                    </ul>

                </div>
            </div>
            <div class="null"></div>
        </div>
        <div class="show-cont">
            <div class="character-topic  hand-mouse">
                <div class="main-tip" style="margin-left: 10px;">
                    <div class="left xiaozi">
                        <img class="head-img" src="./image/frist.png" alt="">
                        <div class="head ">首页</div>
                    </div>
                    <div class="left xiaozi">
                        <img class="head-img" src="./image/frist.png" alt="">
                        <div class="head">动态</div>
                    </div>
                    <div class="left xiaozi">
                        <img class="head-img" src="./image/frist.png" alt="">
                        <div class="head">热门</div>
                    </div>
                    <div class="left xiaozi">
                        <img class="head-img" src="./image/frist.png" alt="">
                        <div class="head">频道</div>
                    </div>
                </div>
                <div class="dif-classfication  hand-mouse">
                    <div class="detail-classfication">
                        动画
                        <span class="click-num">999+</span>
                        <ul id="move" class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                            <!-- <li class="name">综合</li> -->
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        音乐
                        <span class="click-num">999+</span>
                        <ul id="music"  class="ul-tag sub-container">
                            <li class="name mn">原创音乐</li>
                            <li class="name mn">翻唱</li>
                            <li class="name mn">音频</li>
                            <li class="name mn">VOCALOID·UTAU</li>
                            <li class="name mn">电音</li>
                            <li class="name mn">MV</li>
                            <li class="name mn">音乐现场</li>
                            <li class="name mn">音乐综合</li>
                            <li class="name mn">原创音乐</li>
                            <li class="name mn">翻唱</li>
                            
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        舞蹈
                        <span class="click-num">999+</span>
                        <ul class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        知识
                        <span class="click-num">999+</span>
                        <ul class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        生活
                        <span class="click-num">999+</span>
                        <ul class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        时尚
                        <span class="click-num">999+</span>
                        <ul class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        娱乐
                        <span class="click-num">999+</span>
                        <ul class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication">
                        放映厅
                        <span class="click-num">999+</span>
                        <ul class="ul-tag sub-container">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        番剧
                        <span class="click-num">9</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        娱乐
                        <span class="click-num">999</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        国创
                        <span class="click-num">68</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        番剧
                        <span class="click-num">9</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        娱乐
                        <span class="click-num">999</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        国创
                        <span class="click-num">68</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        番剧
                        <span class="click-num">9</span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                    <div class="detail-classfication differ">
                        更多
                        <span class="arrow"></span>
                        <ul class="ul-tag sub-container bottom">
                            <li class="name">MAD.AMV</li>
                            <li class="name">特摄</li>
                            <li class="name">MMD.3D</li>
                            <li class="name">综合</li>
                            <li class="name">短片.手机.配乐</li>
                            <li class="name">手办.模玩</li>
                        </ul>
                    </div>
                </div>
                <div class="other-tip  hand-mouse">
                    <div class=" friendship xiaozi">
                        <img class="lanmu" src="./image/lanmu.png" alt="">
                        <span class="lanmu-character">栏目</span>
                    </div>
                    <div class=" friendship xiaozi">
                        <img class="lanmu" src="./image/lanmu.png" alt="">
                        <span class="lanmu-character">栏目</span>
                    </div>
                    <div class=" friendship xiaozi">
                        <img class="lanmu" src="./image/lanmu.png" alt="">
                        <span class="lanmu-character">栏目</span>
                    </div>
                    <div class=" friendship xiaozi">
                        <img class="lanmu" src="./image/lanmu.png" alt="">
                        <span class="lanmu-character">栏目</span>
                    </div>
                    <div class=" friendship xiaozi">
                        <img class="lanmu" src="./image/lanmu.png" alt="">
                        <span class="lanmu-character">栏目</span>
                    </div>
                    <div class=" friendship xiaozi">
                        <img class="lanmu" src="./image/lanmu.png" alt="">
                        <span class="lanmu-character">音乐PLUS</span>
                    </div>
                </div>
            </div>
            <div class="show-img">
                <div class="frist-showImg  hand-mouse">
                    <!-- 轮播图制作 -->
                    <div class="scrolling-img">
                        <ul id="scrolling-ul" class="ul-tag scrolling-ul">
                            <li class="scrolling-li"><img class="alert-img" src="./image/img2/1.jpg" alt=""></li>
                            <li class="scrolling-li"><img class="alert-img" src="./image/img2/2.jpg" alt=""></li>
                            <li class="scrolling-li"><img class="alert-img" src="./image/img2/3.jpg" alt=""></li>
                            <li class="scrolling-li"><img class="alert-img" src="./image/img2/4.jpg" alt=""></li>
                            <li class="scrolling-li"><img class="alert-img" src="./image/img2/5.jpg" alt=""></li>
                            <li class="scrolling-li"><img class="alert-img" src="./image/img2/1.jpg" alt=""></li>
                        </ul>
                        <!-- 创建一个div来保存导航按钮 -->
                        <div id="navDiv">
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="manySmall-img  hand-mouse">
                        <div class="single-img">
                            <img class="small-img" src="./image/scenary.jpeg" alt="">
                            <div class="describe-img">
                                <div class="head-title">2021年java面试题大全（整理版）100+面试题附答案详细，看完稳了！</div>
                                <div class="author-number">
                                    <img class="video" src="./image/video.png" alt="">
                                    <div class="author"><img class="up" src="./image/icon1.png" alt="">图灵java教学</div>
                                    <div class="author">1.5万播放</div>
                                </div>
                            </div>
                        </div>
                        <div class="single-img">
                            <img class="small-img" src="./image/scenary.jpeg" alt="">
                            <div class="describe-img">
                                <div class="head-title">2021年java面试题大全（整理版）100+面试题附答案详细，看完稳了！</div>
                                <div class="author-number">
                                    <img class="video" src="./image/video.png" alt="">
                                    <div class="author"><img class="up" src="./image/icon1.png" alt="">图灵java教学</div>
                                    <div class="author">1.5万播放</div>

                                </div>
                            </div>
                        </div>
                        <div class="single-img">
                            <img class="small-img" src="./image/scenary.jpeg" alt="">
                            <div class="describe-img">
                                <div class="head-title">2021年java面试题大全（整理版）100+面试题附答案详细，看完稳了！</div>
                                <div class="author-number">
                                    <img class="video" src="./image/video.png" alt="">
                                    <div class="author"><img class="up" src="./image/icon1.png" alt="">图灵java教学</div>
                                    <div class="author">1.5万播放</div>

                                </div>
                            </div>
                        </div>
                        <div class="single-img bottom-img">
                            <img class="small-img" src="./image/scenary.jpeg" alt="">
                            <div class="describe-img">
                                <div class="head-title">2021年java面试题大全（整理版）100+面试题附答案详细，看完稳了！</div>
                                <div class="author-number">
                                    <img class="video" src="./image/video.png" alt="">
                                    <div class="author"><img class="up" src="./image/icon1.png" alt="">图灵java教学</div>
                                    <div class="author">1.5万播放</div>

                                </div>
                            </div>
                        </div>
                        <div class="single-img bottom-img">
                            <img class="small-img" src="./image/scenary.jpeg" alt="">
                            <div class="describe-img">
                                <div class="head-title">2021年java面试题大全（整理版）100+面试题附答案详细，看完稳了！</div>
                                <div class="author-number">
                                    <img class="video" src="./image/video.png" alt="">
                                    <div class="author"><img class="up" src="./image/icon1.png" alt="">图灵java教学</div>
                                    <div class="author">1.5万播放</div>

                                </div>
                            </div>
                        </div>
                        <div class="single-img bottom-img">
                            <img class="small-img" src="./image/scenary.jpeg" alt="">
                            <div class="describe-img">
                                <div class="head-title">2021年java面试题大全（整理版）100+面试题附答案详细，看完稳了！</div>
                                <div class="author-number">
                                    <img class="video" src="./image/video.png" alt="">
                                    <div class="author"><img class="up" src="./image/icon1.png" alt="">图灵java教学</div>
                                    <div class="author">1.5万播放</div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="second-showImg">
                    <div class="left-cont extension">
                        <div class="extension-title">
                            <span class="big-character">
                                <svg t="1620661761850" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2966" width="36" height="36">
                                    <path
                                        d="M32.049995 356.01773844a64.643115 64.643115 0 0 1 18.84799219-46.99499438 61.49345062 61.49345062 0 0 1 45.39516468-19.19795531h64.24315782v299.96805094H96.29315187a61.24347656 61.24347656 0 0 1-45.39516468-19.19795532 64.59312 64.59312 0 0 1-18.84799219-46.99499531zM746.12393844 80.69706312q43.84533-43.74534094 79.5415275-47.99488781a78.34165594 78.34165594 0 0 1 63.24326437 19.74789657q27.647055 24.04743844 46.89500532 70.4424975a579.93823031 579.93823031 0 0 1 31.59663468 103.48897687 1078.58511937 1078.58511937 0 0 1 18.39804 119.53726781q6.14934469 62.34336 6.14934563 118.9373325a844.31007187 844.31007187 0 0 1-7.69918031 113.13794907 695.52591938 695.52591938 0 0 1-22.29762469 106.18869 466.80028125 466.80028125 0 0 1-34.99627313 86.94073968q-19.99786969 37.44601125-44.34527625 55.49409a64.99307719 64.99307719 0 0 1-52.54440375 12.84863157q-28.09700719-5.39942531-58.69374843-41.645565a227.47577156 227.47577156 0 0 0-79.99148063-60.29357813 677.52783656 677.52783656 0 0 0-109.98828469-40.54568156 1151.87731313 1151.87731313 0 0 0-120.88712437-26.64716156c-40.79565469-6.64929187-78.19167187-12.84863156-112.18805063-18.19806188s-62.39335406-10.49888156-84.99094781-15.49834875-35.49621938-11.04882281-38.29592063-18.09807281V284.47535844c2.74970719-9.99893531 13.44856781-18.09807281 32.14657594-24.54738469A559.14044531 559.14044531 0 0 1 328.36843344 242.02988q43.39537781-8.54908969 97.98956343-18.64801406a973.99625906 973.99625906 0 0 0 111.18815719-27.79703906 732.27200531 732.27200531 0 0 0 110.68821094-44.9952075 392.20822594 392.20822594 0 0 0 97.93956844-69.99254532M378.86305531 734.82739156q4.99946719 12.79863656 12.24869532 27.69705 7.39921219 16.39825313 16.29826406 32.04658688c6.79927594 12.04871625 14.9984025 25.24731094 24.49739062 39.49579312 11.598765 17.04818437 23.29751812 34.99627219 34.99627313 53.79427032a323.31556312 323.31556312 0 0 1 26.99712469 51.24454218c6.34932375 15.39835969 8.0991375 27.84703406 5.84937656 37.84596844s-12.09871125 14.9984025-29.09690063 14.9984025H412.50947187a88.8905325 88.8905325 0 0 1-37.74597937-8.0491425 110.88818906 110.88818906 0 0 1-33.19646438-24.49739062 304.56756 304.56756 0 0 1-32.64652312-42.19550532q-19.29794438-29.69683687-36.24613969-60.84352031a351.56255531 351.56255531 0 0 1-32.64652219-70.99243781 387.30874781 387.30874781 0 0 1-12.24869531-50.69460094 101.98913719 101.98913719 0 0 1 0-40.54568156 128.58630469 128.58630469 0 0 1 19.44792844 4.29954187c6.09935063 1.29986156 13.54855687 3.09967031 22.44760875 5.29943625s18.99797625 4.19955281 30.54674625 6.34932375 21.9476625 5.49941438 31.1466825 7.9991475a437.50340156 437.50340156 0 0 1 47.4449475 16.69822125"
                                        fill="#EC6A5E" p-id="2967"></path>
                                </svg>推广
                            </span>
                            <span class="small-character">
                                <img class="fire" src="./image/frist.png" alt="">是时候见识真正的知识了！
                            </span>
                        </div>
                        <div class="other-vedio">
                            <div class="short-vedio">
                                <img class="small-img" src="./image/vedio-img.jpg" alt="">
                                <div class="time">24:00</div>
                                <img class="video weizhi" src="./image/video.png" alt="">
                                <div class="video-describe">
                                    <div class="vedio-style">
                                        <span class="text">机甲弹幕射击手游今日开采，不限号哟！</span>
                                    </div>
                                    <div class="vedio-detail">
                                        <span class="up write-up">up</span>
                                        <span class="xiaozi">终末阵线伊诺贝塔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="short-vedio ">
                                <img class="small-img" src="./image/vedio-img.jpg" alt="">
                                <div class="time">1:24:00</div>
                                <img class="video weizhi" src="./image/video.png" alt="">
                                <div class="video-describe">
                                    <div class="vedio-style">
                                        <span class="ad">广告</span>
                                        <span class="text">机甲弹幕射击手游今日开采，不限号哟！</span>
                                    </div>
                                    <div class="vedio-detail">
                                        <span class="up write-up">up</span>
                                        <span>终末阵线伊诺贝塔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="short-vedio ">
                                <img class="small-img" src="./image/scenary.jpeg" alt="">
                                <div class="video-describe">
                                    <div class="vedio-style">
                                        <span class="ad">广告</span>
                                        <span class="text">机甲弹幕射击手游今日开采，不限号哟！</span>
                                    </div>
                                    <div class="vedio-detail">
                                        <span class="up write-up">up</span>
                                        <span>终末阵线伊诺贝塔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="short-vedio ">
                                <img class="small-img" src="./image/scenary.jpeg" alt="">
                                <div class="video-describe">
                                    <div class="vedio-style">
                                        <span class="ad">广告</span>
                                        <span class="text">机甲弹幕射击手游今日开采，不限号哟！</span>
                                    </div>
                                    <div class="vedio-detail">
                                        <span class="up write-up">up</span>
                                        <span>终末阵线伊诺贝塔</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-cont watch-window">
                        <div class="extension-title watch-list hand-mouse xiaozi">观看列表</div>
                        <div><img class="game hand-mouse" src="./image/game.jpeg" alt=""></div>
                    </div>
                </div>
                <div class="third-showImg">
                    <div class="separate">
                        <img class="sCatImg"
                            src="https://i0.hdslb.com/bfs/sycp/creative_img/202010/e4671e7f10fc0cb1a7d3b14ef17f32f7.jpg"
                            alt="">
                    </div>
                    <div class="doubleImg-character">
                        <div class="left-cont double-Img">
                            <div class=" extension-title">
                                <div class="small-tips">
                                    <span class="btn change">
                                        <img class=" exchange " src="./image/exchange.png" alt="">
                                        换一换</span>
                                    <span class="btn more">
                                        更多
                                        <span class="arrow right-arrow"></span>
                                    </span>
                                </div>
                                <div>
                                    <span class="big-character">
                                        <svg t="1620661761850" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="2966" width="36" height="36">
                                            <path
                                                d="M32.049995 356.01773844a64.643115 64.643115 0 0 1 18.84799219-46.99499438 61.49345062 61.49345062 0 0 1 45.39516468-19.19795531h64.24315782v299.96805094H96.29315187a61.24347656 61.24347656 0 0 1-45.39516468-19.19795532 64.59312 64.59312 0 0 1-18.84799219-46.99499531zM746.12393844 80.69706312q43.84533-43.74534094 79.5415275-47.99488781a78.34165594 78.34165594 0 0 1 63.24326437 19.74789657q27.647055 24.04743844 46.89500532 70.4424975a579.93823031 579.93823031 0 0 1 31.59663468 103.48897687 1078.58511937 1078.58511937 0 0 1 18.39804 119.53726781q6.14934469 62.34336 6.14934563 118.9373325a844.31007187 844.31007187 0 0 1-7.69918031 113.13794907 695.52591938 695.52591938 0 0 1-22.29762469 106.18869 466.80028125 466.80028125 0 0 1-34.99627313 86.94073968q-19.99786969 37.44601125-44.34527625 55.49409a64.99307719 64.99307719 0 0 1-52.54440375 12.84863157q-28.09700719-5.39942531-58.69374843-41.645565a227.47577156 227.47577156 0 0 0-79.99148063-60.29357813 677.52783656 677.52783656 0 0 0-109.98828469-40.54568156 1151.87731313 1151.87731313 0 0 0-120.88712437-26.64716156c-40.79565469-6.64929187-78.19167187-12.84863156-112.18805063-18.19806188s-62.39335406-10.49888156-84.99094781-15.49834875-35.49621938-11.04882281-38.29592063-18.09807281V284.47535844c2.74970719-9.99893531 13.44856781-18.09807281 32.14657594-24.54738469A559.14044531 559.14044531 0 0 1 328.36843344 242.02988q43.39537781-8.54908969 97.98956343-18.64801406a973.99625906 973.99625906 0 0 0 111.18815719-27.79703906 732.27200531 732.27200531 0 0 0 110.68821094-44.9952075 392.20822594 392.20822594 0 0 0 97.93956844-69.99254532M378.86305531 734.82739156q4.99946719 12.79863656 12.24869532 27.69705 7.39921219 16.39825313 16.29826406 32.04658688c6.79927594 12.04871625 14.9984025 25.24731094 24.49739062 39.49579312 11.598765 17.04818437 23.29751812 34.99627219 34.99627313 53.79427032a323.31556312 323.31556312 0 0 1 26.99712469 51.24454218c6.34932375 15.39835969 8.0991375 27.84703406 5.84937656 37.84596844s-12.09871125 14.9984025-29.09690063 14.9984025H412.50947187a88.8905325 88.8905325 0 0 1-37.74597937-8.0491425 110.88818906 110.88818906 0 0 1-33.19646438-24.49739062 304.56756 304.56756 0 0 1-32.64652312-42.19550532q-19.29794438-29.69683687-36.24613969-60.84352031a351.56255531 351.56255531 0 0 1-32.64652219-70.99243781 387.30874781 387.30874781 0 0 1-12.24869531-50.69460094 101.98913719 101.98913719 0 0 1 0-40.54568156 128.58630469 128.58630469 0 0 1 19.44792844 4.29954187c6.09935063 1.29986156 13.54855687 3.09967031 22.44760875 5.29943625s18.99797625 4.19955281 30.54674625 6.34932375 21.9476625 5.49941438 31.1466825 7.9991475a437.50340156 437.50340156 0 0 1 47.4449475 16.69822125"
                                                fill="#EC6A5E" p-id="2967"></path>
                                        </svg>正在直播
                                    </span>
                                    <span class="small-character">
                                        当前共有6529个在线直播
                                    </span>
                                </div>
                            </div>
                            <div class="live-streaming">
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="head"><img class="head-img" src="./image/head-img.jpg" alt=""></div>
                                        <div class="content">
                                            <div class="text">哔哩哔哩绝地求生赛事</div>
                                            <div class="order">【直播】第五周周中赛</div>
                                            <div class="express">绝地求生</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="short-vedio zhibo">
                                    <img class="small-img2" src="./image/scenary.jpeg" alt="">
                                    <div class="zhibo-describe">
                                        <div class="zhibo-describe">
                                            <div class="head"><img class="head-img" src="./image/head-img.jpg" alt="">
                                            </div>
                                            <div class="content">
                                                <div class="text">哔哩哔哩绝地求生赛事</div>
                                                <div class="order">【直播】第五周周中赛</div>
                                                <div class="express">绝地求生</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-cont double-character">此处先留着后期更具情况而定选择写什么内容</div>
                    </div>
                </div>
            </div>
            <div class="call-help">联系客服</div>
            <div class="total-list">
                <ul class="ul-tag list-box">
                    <li class="item">直播</li>
                    <li class="item">动画</li>
                    <li class="item">番剧</li>
                    <li class="item">直播</li>
                    <li class="item">动画</li>
                    <li class="item">番剧</li>
                    <li class="item">直播</li>
                    <li class="item">动画</li>
                    <li class="item">番剧</li>
                </ul>
            </div>

        </div>
    </div>

</body>

</html>